/* General styles */

body {
  background-image: url('Premium Vector _ Abstract geometric shape and connection with 3d cubes on the background_.jpeg');  
  background-size: cover;
  background-position: center;
  padding: 20px;
  font-family: 'Playwrite IT Moderna', sans-serif;
  
}

.registration-form {
  max-width: 500px;
  margin: 0 auto;
  background-color: rgba(255, 254, 254, 0.4); /* 80% opacity white */
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Box shadow */
}

.registration-form h2 {
  text-align: center;
}

.registration-form .form-group {
  margin-bottom: 15px;
}

.registration-form input,
.registration-form select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.registration-form button {
  width: 100%;
  padding: 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.registration-form button:hover {
  background-color: #45a049;
}

.registration-form .form-group:last-child {
  margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .registration-form {
    padding: 15px;
  }
  
  .registration-form input,
  .registration-form select {
    padding: 8px;
  }
  
  .registration-form button {
    padding: 10px;
  }
}